const Login = {
    data() {
        return {
            loginRules: {
                username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }]
            },
            loading: false,
            loginForm: {
                username: "admin", password: "123456"
            },
            isRemmber: true
        }
    },
    methods:{
        login(formEl) {
            if (!formEl) return;
            formEl.validate(async valid => {
                if (!valid) return;
                this.loading = true;
                try {

                    this.$router.push(HOME_URL);
                    // ElNotification({
                    //     title: data.name,
                    //     message: "欢迎登录",
                    //     type: "success",
                    //     duration: 3000
                    // });
                }
                catch (e) {
                    console.log(e)
                }
                finally {
                    this.loading = false;
                }
            });
        },
        resetForm(formEl) {
            if (!formEl) return;
            formEl.resetFields();
        }
    },
    template:
        `
        <div class="login-container flx-center">
            <div class="login-box">
                <div class="login-form">
                    <div class="login-name">
                        欢迎登录
                    </div>
                    <div class="login-text">{{ APPNAME }}</div>
                    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
                        <el-form-item prop="username">
                            <el-input v-model="loginForm.username" placeholder="用户名">
                                <template #prefix>
                                <el-icon class="el-input__icon"><user /></el-icon>
                    </template>
                    </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" placeholder="密码" show-password autocomplete="new-password">
                            <template #prefix>
                            <el-icon class="el-input__icon"><lock /></el-icon>
                        </template>
                    </el-input>
                    </el-form-item>
                    </el-form>
                    <div class="handle-box">
                        <el-checkbox v-model="isRemmber">记住密码</el-checkbox>
                        <div class="reset-label" @click="resetForm(loginFormRef)">重置</div>
                    </div>
                    <div class="login-btn" :loading="loading" @click="login(loginFormRef)">
                        登录
                    </div>
                    <div class="login-desc">
                        <div class="login-desc1">空军军医大学预防医学系</div>
                        <div class="login-desc2">技术支持：风后（上海）健康科技有限公司</div>
                    </div>
                </div>
            </div>
        </div>
        `
}

export default Login